<template>
  <view class="index-footer">
    <view class="index-footer-wrap">
      <view class="ifw-left" @click="changeVisible">
        <image src="/static/image/car.png"></image>
        <view class="ifw-total" v-if="total">{{ total }}</view>
      </view>
      <view class="ifw-right">
        <view class="shop-info-price">合计:<text class="unit">￥</text><text class="price">{{ totalPrice }}</text></view>
        <view class="index-footer-btn" @click="toAccount">去结算</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'IndexFooter',
  props: {
    shopList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      value: 2,
    }
  },
  computed: {
    totalPrice() {
      let total = 0
      let num = eval(this.shopList.map(el => +el.market_price * +el.num).join('+'))
      if(this.shopList.length) {
        total = num
      }
      return this.filterTotal(total)
    }
  },
  methods: {
    //  过滤总数，整数就加上.00，小数点1位就补齐0
    filterTotal(num) {
      num = num.toString()
      if(num.includes('.')) {
        if(num.split('.')[1].length > 1) {
          return Number(num).toFixed(2)
        }else {
          return num + '0'
        }
      }else {
        return num + '.00'
      }
    },
    changeVisible() {
      if(this.totalPrice) this.$emit("changeShopVisible")
    },
    toAccount() {
      this.$emit('toAccount')
    }
  }
}
</script>
<style lang="scss" scoped>
  .index-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: $white;
    z-index: 999999;
    border-top: 1rpx solid #f6f6f6;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    .index-footer-wrap {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      position: relative;
      image {
        width: 118rpx;
        height: 70rpx;
      }
      .ifw-left {
        position: relative;
      }
      .ifw-total {
        position: absolute;
        width: 24rpx;
        height: 24rpx;
        background: #F55726;
        border-radius: 50%;
        right: 10rpx;
        top: 10rpx;
        font-size: 20rpx;
        text-align: center;
        line-height: 24rpx;
        color: #fff;
      }
    }
    .ifw-right {
      display: flex;
      align-items: center;
      .price, .unit {
        font-weight: bold;
        font-size: 32rpx;
        color: #f55726;
      }
      .unit {
        font-size: 22rpx;
        margin-left: 10rpx;
      }
    }
    .index-footer-btn {
      width: 178rpx;
      height: 70rpx;
      line-height: 70rpx;
      color: #fff;
      font-size: 28rpx;
      background: #40AE36;
      border-radius: 35rpx;
      text-align: center;
      margin-left: 30rpx;
    }
  }
</style>